<template>
	<view style="width:100%;position:relative;">
		<helang-blur :params="params"></helang-blur>
		<view class="random  flex-direction flex align-center justify-center" @click="randomTask">
			<view style="color: #FFFFFF;font-size: 24rpx;">立即</view>
			<view style="color: #FFFFFF;font-size: 24rpx;">沟通</view>
		</view>
		<u-avatar @click="homePage(designerInfo.id,userType)" :src="designerInfo.image" size="55"
			style="position: absolute;top:230rpx;left: 19rpx;z-index: 99;">
		</u-avatar>
		<view style="margin-top: -280rpx;">
			<view class="flex align-center" style="width: 100%;">
				<image src="../../static/desgin/1.png" mode="aspectFit" style="width:200rpx;height:300rpx;"></image>
				<view class="flex align-center "
					style="background: #ffffff;height: 115rpx;margin-left: -15rpx;width:600rpx;border-top-right-radius:25rpx;">
					<view class="otherfu">
						<view style="color: #1E1E1E;font-size: 36rpx;font-weight: 650;z-index: 9999;">
							{{designerInfo.fans}}
						</view>
						<view class="feieres" style="z-index: 9999;">粉丝</view>
					</view>
					<view class="otherfu">
						<view style="color: #1E1E1E;font-size: 36rpx;font-weight: 650;">
							{{designerInfo.attention}}
						</view>
						<view class="feieres">关注</view>
					</view>
					<view class="attention" v-if="concern==0" style="margin-left:50rpx;z-index: 9999;"
						@click="getConcern">
						关注</view>
					<view @click="sheet" v-if="concern==1" class="attention"
						style="z-index: 9999;margin-left:50rpx;color: #1E1E1EFF;background-color: #ECECECFF;">已关注
					</view>
				</view>
			</view>
			<view style="background: #ffffff;width: 100%;height: 208rpx;margin-top: -100rpx;">
				<view class="flex" style="padding-top: 30rpx;padding-left: 20rpx;">
					<view style="color: #1E1E1E;font-size: 36rpx;font-weight:650;">{{designerInfo.name}}</view>
					<view class="master">设计达人</view>
					<view class="master">年度优秀</view>
				</view>
				<view style="color: #1E1E1E;font-size: 28rpx;padding:28rpx;">
					{{designerInfo.signature}}
				</view>
			</view>
		</view>
		<view class="wrapper">
			<view class="flex flex-direction justify-center align-center"
				style="background: #ffffff;text-align: center;margin-top: 30rpx;">
				<u-tabs :list="list" @click="clickItem" :current="currentTab" lineWidth="60" lineColor='#492D22'
					lineHeight="7" class="tabsStyle"
					:inactiveStyle="{color: '#666666',fontSize: '30rpx',fontWeight: 400}"
					:activeStyle="{color: '#333333',fontSize: '30rpx',fontWeight: 'bold'}"></u-tabs>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="100" id="works">
					<view class="flex">
						<view class=" flex flex-direction " style="padding: 0 20rpx;" v-for="(item,index) in followData"
							@click="opus(item.id)">
							<image :src="item.image" mode="aspectFill"
								style="width: 320rpx;height:240rpx;border-radius: 20rpx;">
							</image>
							<view style="text-align: left;margin: 10rpx 0;">
								<!-- <view style="font-size: 28rpx;">{{item.name}}</view> -->
								<view style="color: #1E1E1E;opacity: .5;">{{item.title}}</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
			<view style="margin-top: 30rpx;background-color: #ffffff;" id="ServiceProcess">
				<view style="color: #000000;color: 36rpx;font-weight: 650;padding:24rpx 0 10rpx 30rpx;">服务流程</view>
				<view class="flex flex-wrap">
					<view class="otherfuTwo" v-for="(item, index) of cid">
						<view>
							<image style="width:112rpx;height:112rpx;" :src="item.Image" mode="">
							</image>
						</view>
						<view style="font-size: 28rpx;color:#1E1E1E;margin-top: 16rpx;etter-spacing: 29px;">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<view style="background-color: #ffffff;padding:0 30rpx;margin: 30rpx 0;overflow: hidden;" id="note">
				<view class="justify-between flex" style="margin-top: 30rpx;">
					<view style="color: #000000;color: 36rpx;font-weight:650;">项目笔记</view>
					<view class="flex align-center" @click="notes()">
						<view style="color: #1E1E1E;opacity: .3;font-size: 28rpx;">共{{notesList.length}}篇项目笔记</view>
						<image src="/clientEnd/static/topic/7814.png" mode="aspectFit"
							style="width:64rpx;height:64rpx;margin-left: 5rpx;"></image>
					</view>
				</view>
				<view v-for="(item,index) in notesList" :key="index" style="padding:0 30rpx;margin-top:55rpx;">
					<view style="color: #000000;font-size: 36rpx;font-weight:650;">{{item.title}}</view>
					<view class="title">实地勘查</view>
					<view style="font-size: 28rpx;color: #000000;">{{item.content}}</view>
					<view style="margin: 30rpx 0;">
						<u-album :urls="[item.image]" keyName="src2" space="5"></u-album>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<uni-popup id="popup" ref="sheet" type="bottom" :animation="true">
			<view style="text-align: center;padding: 30rpx;background-color: #ECECECFF;" @click="cancelConcern">
				取消关注
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				distanceArr: [], // 每一个ID对应的scrollTop值
				isTabChange: false, // 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题
				currentTab: -1, // 由于初始化的uview的代码有bug，所以默认是-1，在第一次显示的时候，设置0，自动复位，防止错误
				params: {
					width: '100%',
					height: '462rpx',
					image: '',
					blur: "xl"
				},
				list: [{
					name: '作品',
					id: '#works'
				}, {
					name: '服务流程',
					id: '#ServiceProcess'
				}, {
					name: '项目笔记',
					id: '#note'
				}, {
					name: '日常动态',
					id: '#trends'
				}],
				followData: [{
					name: "需求沟通",
					Image: "../../static/plate/8147.png",
					id: 0
				}],
				image: [],
				cid: [{
						name: "需求沟通",
						Image: "../../static/plate/8147.png",
						id: 0
					},
					{
						name: "支付定金",
						Image: "../../static/plate/8148.png",
						id: 1
					},
					{
						name: "实地勘查	",
						Image: "../../static/plate/8149.png",
						id: 2
					},
					{
						name: "初步方案",
						Image: "../../static/plate/8150.png",
						id: 3
					},
					{
						name: "确立方案",
						Image: "../../static/plate/8151.png",
						id: 4
					},
					{
						name: "下单厂家",
						Image: "../../static/plate/8152.png",
						id: 5
					},
					{
						name: "验收",
						Image: "../../static/plate/8153.png",
						id: 6
					},

				],
				notesList: [],
				id: '',
				designerInfo: [],
				concern: '',
				token: '',
				userType: ''
			}
		},
		// 监听页面滚动
		onPageScroll(event) {
			const _this = this
			if (this.isTabChange) {
				return
			}
			const {
				scrollTop
			} = event;
			const skewY = 55 // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
			if (scrollTop >= skewY) {
				if (!this.showTabs && this.currentTab <= 0) { // 在未显示tab并且 currentTab <= 0时，防止uview ui抖动bug，设置默认复位值
					this.currentTab = 0
				}
				this.showTabs = true
				this.$nextTick(() => {
					const length = this.distanceArr.length
					const index = this.distanceArr.findIndex(el => el - skewY - scrollTop > 0)
					// 当index  == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
					// 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
					this.currentTab = index > 0 ? index - 1 : length - 1
				})
			} else {
				this.showTabs = false
			}
		},
		created() {
			this.getDetails();
		},
		onLoad(e) {
			this.id = e.id
			this.token = this.$cache.get('token')
			// console.log(this.id, '受点伤')
		},
		onShow() {
			this.getDistanceArr()
		},
		methods: {
			// 获取所有元素在当前页面所处的位置信息
			getDistanceArr() {
				const _this = this
				_this.list.map(el => {
					uni.createSelectorQuery().select(el.id).boundingClientRect(data => {
						// 获取当前ID距离顶部的top值
						_this.distanceArr.push(data.top)
					}).exec()
				})
			},
			clickItem(item, index) {
				this.isTabChange = true
				const _this = this
				// this.$nextTick 保证当前isTabChange 为true后执行代码
				// 避免在istabChange变为true的时候，执行代码，监听事件还是会继续执行重新计算currenTab值
				this.$nextTick(() => {
					_this.currentTab = item.index
					uni.createSelectorQuery().select(item.id).boundingClientRect(data => {
						uni.createSelectorQuery().select('.wrapper').boundingClientRect(res => {
							const scrollTop = data.top - res.top // 获取差值
							const skewY = 50 // 偏移
							// 页面开始进行滚动到目标位置
							uni.pageScrollTo({
								scrollTop: scrollTop > 0 ? scrollTop - skewY :  scrollTop + skewY,
								duration: 300,
								complete: function () {
									const timer = setTimeout(() => {
										_this.isTabChange = false // 关闭
										clearTimeout(timer)
									}, 500) // 解决ios和安卓、鸿蒙系统兼容性问题
								}
							});
						}).exec()
					}).exec()
				})
			},
			randomTask() {
				uni.navigateTo({
					url: '../../../pages/information/User-Chat?id=' + this.designerInfo.id + '&title=' + this
						.designerInfo.name + '&type=' + 1 + '&myName=' + this.$cache.get('name') +
						'&myIcon=' + this.$cache.get('avatar') + '&avatar=' + this.designerInfo.image +
						'&sendId=' + this.designerInfo.id
				})
				console.log(this.designerInfo, '打我达瓦达瓦大我达瓦达瓦大我')
			},
			// 关注
			getConcern() {
				let data = {
					focusedId: this.id,
					userType: this.userType,
					operation: 1
				}
				this.$api.addConcern(data).then((res) => {
					console.log('关注', res)
					this.getDetails()
				})
			},
			sheet() {
				this.$refs.sheet.open()
			},
			// 取消关注
			cancelConcern() {
				let data = {
					focusedId: this.id,
					userType: this.userType,
					operation: 0
				}
				this.$api.unConcern(data).then((res) => {
					console.log('取消关注', res)
					this.$refs.sheet.close()
					this.getDetails()
				})
			},
			// 设计师主页详情
			homePage(id, userType) {
				this.$tools.goPageNoAuth('../decoration/homepage?Id=' + id + '&usType=' + this.userType)
			},
			// 作品详情
			opus(id) {
				this.$tools.goPageNoAuth('../decoration/homepageDetails?id=' + id)
			},
			// 设计师详情
			getDetails() {
				let data = {
					id: this.id
				}
				if (this.token == null) {
					this.$api.deviseDetail(data).then((res) => {
						this.designerInfo = res.data.result.designerInfo;
						this.followData = res.data.result.workList
						this.notesList = res.data.result.projectList
						this.params.image = this.designerInfo.image
						this.concern = res.data.result.follow
						this.userType = res.data.result.type
					})
				} else {
					this.$api.entryDeviseDetail(data).then((res) => {
						this.designerInfo = res.data.result.designerInfo;
						this.followData = res.data.result.workList
						this.notesList = res.data.result.projectList
						this.params.image = this.designerInfo.image
						this.concern = res.data.result.follow
						this.userType = res.data.result.type
						console.log('哈哈', res)
					})
				}

			},
			notes() {
				this.$tools.goPageNoAuth('./notes?id=' + this.id)
			}
		}
	}
</script>

<style scoped>
	.wrapper {
		.tabsStyle {
			::v-deep {
				.u-tabs {
					box-shadow: 0px 4px 6px 0 rgba(153, 153, 153, 0.2);
				}
			}
		}
	}

	.otherfu {
		width: calc(80% /3);
		display: flex;
		margin: 30rpx 0;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.attention {
		color: #FFFFFF;
		color: 28rpx;
		padding: 16rpx 50rpx;
		border-radius: 8rpx;
		background: #492D22;
	}

	.feieres {
		font-size: 28rpx;
		color: rgba(30, 30, 30, 0.3);
	}

	.master {
		background: linear-gradient(167deg, #53EFFC 0%, #EFDBB6 100%);
		border-radius: 18rpx;
		padding: 2rpx 18rpx;
		color: #FFFFFF;
		margin-left: 36rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		margin: 20rpx 0;
		overflow: hidden;
	}

	.followList {
		/* padding:0 30rpx; */
	}

	.otherfuTwo {
		width: calc(100%/4);
		display: flex;
		margin: 30rpx 0;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.title {
		color: rgba(30, 30, 30, 0.3);
		background: rgba(30, 30, 30, 0.1);
		border-radius: 22rpx;
		font-size: 24rpx;
		text-align: center;
		width: 150rpx;
		margin: 20rpx 6rpx;
		line-height: 40rpx;
	}

	.random {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(180deg, rgba(255, 98, 98, 1) 0%, rgba(255, 51, 51, 1) 100%);
		border-radius: 50%;
		box-shadow: 0px 6px 9px 0px rgba(255, 221, 221, 1);
		z-index: 1000;
		right: 20rpx;
		/*  #ifdef APP-PLUS */
		bottom: 230rpx;
		/*  #endif */
		/*  #ifdef H5 */
		bottom: 330rpx;
		/*  #endif */
	}
</style>
